<template>
	<!-- 店铺街 -->
	<view>
		<view class='indexList tui-skeleton' :style="[boxStyle]" v-if="merList.length>0">
			<view class='title acea-row row-between-wrapper'>
				<view class='text line1 tui-skeleton-rect acea-row'>
					<image :src="logoUrl"></image>
					<text class='label' :style="[titleColor]">{{dataConfig.titleConfig.val}}</text>
				</view>
				<view class='more tui-skeleton-rect fs-12' :style="[moreColor]" hover-class="none" @click="more()">
          更多
					<text class="iconfont icon-ic_rightarrow fs-12"></text>
				</view>
			</view>
			<view class='tips mb20'>Good brand store</view>
			<view class='merList' :style="[gridGap]" v-if="listStyle == 0">
				<view class='item' v-for="(item,index) in merList" :key='index'>
					<navigator :url="`/pages/merchant/home/index?merId=${item.id}`" hover-class="none">
						<view class='pic tui-skeleton-rect'>
							<easy-loadimage :image-src="item.coverImage"
								:radius="dataConfig.contentStyle.val*2+'rpx'"></easy-loadimage>
						</view>
						<image class="lines left" :src="urlDomain+'crmebimage/presets/lianjie.png'"></image>
						<view v-show="logoShow" class='logo tui-skeleton-rect'>
							<image :src='item.rectangleLogo'></image>
						</view>
						<image class="lines right" :src="urlDomain+'crmebimage/presets/lianjie.png'"></image>
						<view class='merName tui-skeleton-rect'>
							<view class='neme line1 line-heightOne' v-show="nameShow" :style="[nameColor]">{{item.name}}</view>
							<view v-show="typeShow"><text class='label'
									:style="[labelColor]">{{item.typeId | merchantTypeFilter}}</text></view>
						</view>
					</navigator>
				</view>
			</view>
			<view v-if="listStyle == 1">
				<mer-card :merchantList="merList" :merchantStyle="merchantStyle" :isShowHome="isShowHome" :isStreet="true" :isHome="true"></mer-card>
			</view>
		</view>
	</view>
</template>

<script>
	// +----------------------------------------------------------------------
	// | CRMEB [ CRMEB赋能开发者，助力企业发展 ]
	// +----------------------------------------------------------------------
	// | Copyright (c) 2016~2025 https://www.crmeb.com All rights reserved.
	// +----------------------------------------------------------------------
	// | Licensed CRMEB并不是自由软件，未经许可不能去掉CRMEB相关版权
	// +----------------------------------------------------------------------
	// | Author: CRMEB Team <admin@crmeb.com>
	// +----------------------------------------------------------------------
	import {
		getMerListbyidsApi,
    getRegionMerListApi
	} from '@/api/merchant.js';
	import merCard from '@/components/merchantList/index.vue'
	import easyLoadimage from '@/components/base/easy-loadimage.vue';
  import {indexMerchantApi} from "@/api/product";
	let app = getApp()
	export default {
		name: 'merchantList',
		props: {
			dataConfig: {
				type: Object,
				default: () => {}
			},
      // 圈层ID集合，逗号分隔
      regionIds: {
        type: String,
        default: ''
      }
		},
		data() {
			return {
				urlDomain: this.$Cache.get("imgHost"),
				merList: [],
				isShowHome: {} ,//首页中展示字段判断
				merchantStyle: null ,//样式二中的样式集合
				themeColor:this.$options.filters.filterTheme(app.globalData.theme),
        num: 50,
        params: {
          circleIds: '',
          merIds: '',
          num: ''
        }
			}
		},
		components: {
			merCard,
			easyLoadimage
		},
		computed: {
      // 页面类型，商城首页还是圈层首页
      fromToType(){
        return this.dataConfig.fromToType ? this.dataConfig.fromToType : ''
      },
			//店铺数据类型，0默认，1自定义
			listConfig(){
				return this.dataConfig.listConfig.tabVal
			},
			//店铺数据自定义，选中商户的id集合
			activeValueMer(){
				return this.dataConfig.activeValueMer.activeValue
			},
			//样式类型，0，1
			listStyle() {
				return this.dataConfig.tabConfig.tabVal
			},
			//最外层盒子的样式
			boxStyle() {
				return {
					borderRadius: this.dataConfig.bgStyle.val * 2 + 'rpx',
					background: `linear-gradient(${this.dataConfig.bgColor.color[0].item}, ${this.dataConfig.bgColor.color[1].item})`,
					margin: this.dataConfig.mbConfig.val * 2 + 'rpx' + ' ' + '20rpx' + ' ' + 0,
					padding: this.dataConfig.upConfig.val * 2 + 'rpx' + ' ' + '10px' + ' ' + this.dataConfig.downConfig
						.val * 2 + 'rpx'
				}
			},
			//图片样式
			contentStyle() {
				return {
					'border-radius': this.dataConfig.contentStyle.val + 'px',
				}
			},
			//内容间距
			gridGap() {
				return {
					'grid-gap': this.dataConfig.contentConfig.val + 'px'
				}
			},
			//标题颜色
			titleColor() {
				return {
					'color': this.dataConfig.titleColor.color[0].item
				}
			},
			//名称颜色
			nameColor() {
				return {
					'color': this.dataConfig.nameColor.color[0].item
				}
			},
			//更多颜色
			moreColor() {
				return {
					'color': this.dataConfig.moreColor.color[0].item
				}
			},
			  // 价格颜色
			priceColor(){
				return {
				  'color': this.dataConfig.themeStyleConfig.tabVal?this.dataConfig.priceColor.color[0].item:this.themeColor
				}
			},
			//标题图片
			logoUrl() {
				return this.dataConfig.logoConfig.url
			},
			//标签
			labelColor() {
				return {
					'backgroundColor': this.dataConfig.themeStyleConfig.tabVal?this.dataConfig.labelColor.color[0].item:this.themeColor,
					'color': this.dataConfig.labelFontColor.color[0].item
				}
			},
			//店铺名称
			nameShow() {
				if (this.dataConfig.typeConfig.activeValue.indexOf(0) !== -1) {
					return true;
				} else {
					return false;
				}
			},
			//店铺logo
			logoShow() {
				if (this.dataConfig.typeConfig.activeValue.indexOf(1) !== -1) {
					return true;
				} else {
					return false;
				}
			},
			//店铺类型
			typeShow() {
				if (this.dataConfig.typeConfig.activeValue.indexOf(2) !== -1) {
					return true;
				} else {
					return false;
				}
			},
			//店铺数量
			numConfig(){
				return this.dataConfig.numConfig.val
			}
		},
		mounted() {
			this.merchantStyle = {
				contentStyle: this.contentStyle,
				nameColor: this.nameColor,
				labelColor: this.labelColor,
				priceColor: this.priceColor
			}
			this.isShowHome = {
				typeShow: this.typeShow,
				nameShow: this.nameShow,
				logoShow: this.logoShow
			}
			
			// 监听位置变化事件
			uni.$on('locationChanged', this.handleLocationChanged);
			
			this.$store.dispatch('MerCategoryList');
			this.$store.dispatch('MerTypeList');
			
			this.loadMerchantData();
		},
		// activated() {
		// 	// #ifdef H5
		// 	this.loadMerchantData();
		// 	// #endif
		// },
		methods: {
			loadMerchantData() {
        this.params.circleIds = this.regionIds
        if(this.listConfig === 0){
          this.params.num = this.numConfig
          this.params.merIds = ''
        }else{
          this.params.merIds = this.activeValueMer.join(',')
          this.params.num = ''
        }
        this.getMerList();
			},
			// 处理位置变化事件
			handleLocationChanged() {
				// 重新加载商户数据
				this.merList = [];
        this.loadMerchantData();
				// 判断是圈层模式还是平台模式
				// if (this.fromToType === 'regionHome') {
				// 	// 圈层商户列表 - 使用最新位置信息
				// 	this.getRegionMerListWithLocation();
				// } else {
				// 	// 平台商户列表 - 根据配置重新加载
				// 	if (this.listConfig === 0) {
				// 		this.getMerList();
				// 	} else {
				// 		this.getMerListbyids();
				// 	}
				// }
			},

			// 位置变化后的圈层商户列表 - 使用最新位置信息
			async getRegionMerListWithLocation(){
				try {
					// 从位置缓存获取最新位置
					const locationInfo = uni.getStorageSync('location_info');
					
					if (this.fromToType === 'regionHome') {
						// 没有位置信息时，回退到使用regionIds
						return this.getRegionMerList();
					}

					const params = {
						num: this.num,
						latitude: locationInfo.latitude,
						longitude: locationInfo.longitude
					};
					
					const { data } = await getRegionMerListApi(params);
					
					// 如果位置查询返回空数据，回退到regionIds查询
					if (!data || data.length === 0) {
						return this.getRegionMerList();
					}
					
					this.merList = data || [];
				} catch (error) {
					console.error('获取圈层商户列表失败:', error);
					// 出错时也回退到regionIds查询
					this.getRegionMerList();
				}
			},

			// 圈层商户列表 - 初始化时使用props中的regionIds
			async getRegionMerList(){
				try {
					const params = {
						num: this.num,
						regionIds: this.regionIds
					};
					const { data } = await getRegionMerListApi(params);
					this.merList = data || [];
				} catch (error) {
					console.error('获取圈层商户列表失败:', error);
					this.merList = [];
				}
			},
			more() {
				// 判断是否是圈层模式，传递相应参数
				if (this.regionIds) {
					// 圈层模式：传递圈层参数
					const url = `/pages/merchant/merchant_street/index?fromRegion=true&regionIds=${this.regionIds}`;
					this.$util.navigateTo(url);
				} else {
					// 平台模式：使用默认配置链接
					this.$util.navigateTo(this.dataConfig.linkConfig.val);
				}
			},
			//默认店铺数据
			getMerList() {
        indexMerchantApi(this.params).then((res) => {
					this.merList = res.data.list;
				});
			},
			//自定义店铺数据
			getMerListbyids(){
				getMerListbyidsApi(this.activeValueMer.join(',')).then((res) => {
					this.merList = res.data;
				});
			}
		},
		beforeDestroy() {
			// 清理事件监听器
			uni.$off('locationChanged', this.handleLocationChanged);
		}
	}
</script>

<style lang="scss" scoped>
	.indexList {}

	.merList {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		grid-template-rows: auto;
		width: 100%;

		.item {
			position: relative;

			.lines {
				width: 8rpx;
				height: 34rpx;
				position: absolute;
				z-index: 1;
			}

			.left {
				left: 14rpx;
				top: 204rpx;
			}

			.right {
				right: 14rpx;
				top: 204rpx;
			}

			.pic {
				width: 100%;
				height: 220rpx;
				overflow: hidden;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.logo {
				width: 150rpx;
				height: 44rpx;
				background: #FFFFFF;
				box-shadow: 0rpx 3rpx 6rpx 1rpx rgba(0, 0, 0, 0.1000);
				border-radius: 33rpx;
				opacity: 1;
				margin: auto;
				position: absolute;
				z-index: 1;
				left: 16%;
				top: 59%;

				image {
					margin: auto;
					width: 130rpx;
					height: 44rpx;
					display: block;
				}
			}

			.merName {
				width: 100%;
				height: 110rpx;
				background: #FFFFFF;
				border-radius: 14rpx;
				opacity: 1;
				padding: 30rpx 0 14rpx 0;
				display: flex;
				flex-direction: column;
				align-items: center;

				.neme {
					font-weight: bold;
					color: #333333;
					font-size: 22rpx;
					text-align: center;
					margin-bottom: 4rpx;
					width: 210rpx;
				}

				.label {
					height: 28rpx;
					line-height: 28rpx;
					border-radius: 14rpx;
					opacity: 1;
					text-align: center;
					font-size: 18rpx;
					padding: 0 12rpx;
				}
			}
		}
	}
	.fs-12{
		font-size: 24rpx !important;
	}
</style>